<template>
    <div class="container">
        <!-- 上层板块 -->
        <div class="content">
            <header :style="headerStyle">
                <div v-if="isSmallScreen" class="smallScreen">
                    <i @click="showNav" class="el-icon-s-fold" style="cursor: pointer;"></i>
                </div>
                <div class="title">
                    <img src="../../../public/images/header-logo.png" alt="">
                </div>
                <div class="nav" v-if="!isSmallScreen">
                    <ul>
                        <li :class="{ 'active': isActive('/home') }" @click="toPages('/')">首页</li>
                        <li :class="{ 'active': isActive('/introduced') }" @click="toPages('/introduced')">简介</li>
                        <li :class="{ 'active': isActive('/honor') }" @click="toPages('/honor')">荣誉</li>
                        <li :class="{ 'active': isActive('/activeDetail') }" @click="toPages('/activeDetail')">活动详情</li>
                        <li :class="{ 'active': isActive('/enroll') }" @click="toPages('/enroll')">提交方式</li>
                        <li>
                            <a href="http://www.yunhai-crm.com/hmshQuery" target="_blank">成绩查询</a>
                        </li>
                    </ul>
                </div>
                <el-drawer :visible.sync="drawer" :with-header="false" :modal="false">
                    <ul>
                        <li :class="{ 'active': isActive('/home') }" @click="toPages('/')">首页</li>
                        <li :class="{ 'active': isActive('/introduced') }" @click="toPages('/introduced')">简介</li>
                        <li :class="{ 'active': isActive('/honor') }" @click="toPages('/honor')">荣誉</li>
                        <li :class="{ 'active': isActive('/activeDetail') }" @click="toPages('/activeDetail')">活动详情</li>
                        <li :class="{ 'active': isActive('/enroll') }" @click="toPages('/enroll')">提交方式</li>
                        <li>
                            <a href="http://www.yunhai-crm.com/hmshQuery" target="_blank">成绩查询</a>
                        </li>
                    </ul>
                </el-drawer>
            </header>
        </div>
    </div>
</template>

<script>
export default {
    name: 'homes',
    data() {
        return {
            isSmallScreen: window.innerWidth < 960, // 初始判断,
            drawer: false, // 控制抽屉的显示与隐藏
        }
    },
    mounted() {
        // 监听窗口尺寸变化
        window.addEventListener('resize', this.checkScreenSize);
    },
    beforeDestroy() {
        // 清理事件监听
        window.removeEventListener('resize', this.checkScreenSize);
    },
    props: {
        //背景透明度
        opacity: {
            type: Number,
            default: 1
        }
    },
    computed: {
        headerStyle() {
            return {
                backgroundColor: `rgba(105, 0, 0, ${this.opacity})`,
            };
        }
    },
    methods: {
        // 跳转页面
        toPages(url) {
            this.$router.push(url);
        },
        //监听视口宽度
        checkScreenSize() {
            this.isSmallScreen = window.innerWidth < 960; // 更新状态
        },
        showNav() {
            this.drawer = true;
        },
        // 判断当前页面是否是指定路径
        isActive(page) {
            return this.$route.path === page;
        }
    },
}
</script>

<style scoped>
.container {
    width: 100%;
}

.code {
    position: absolute;
    right: 100px;
    top: 40px;
    z-index: 10;
    width: 30px;
    height: 25px;
}

.code:hover {
    cursor: pointer;
}


header {
    width: 100%;
    height: 10vw;
    padding: 1vw 0;
    background-color: #690000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    width: 60vw;
    color: white;
    font-size: 20px;
}

ul li:hover {
    cursor: pointer;
    color: rgb(243, 198, 113);
}

a {
    text-decoration: none;
    color: white;
}

ul li a:hover {
    color: rgb(243, 198, 113);
    text-decoration: none;
}

.active {
    color: rgb(243, 198, 113);
}

/* 小屏幕/手机 */
@media screen and (max-width: 960px) {
    .title img {
        width: 60%;
    }

    header {
        height: 20vw;
    }

    .smallScreen {
        position: absolute;
        height: 20vw;
        display: flex;
        align-items: center;
        right: 5vw;
    }

    .smallScreen i {
        font-size: 24px;
        color: #fff;
    }

    ul {
        width: 100%;
        display: flex;
        color: #690000;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    ul li {
        padding: 5vw 0;
    }

    a {
        color: #690000;
    }
}
</style>